<template>
    <div class="table-page">
        <a-row>
            <a-col :xs="20" :sm="20" :md="20" :lg="20" :xl="21" :xxl="20">
                <a-form
                    :model="queryForm"
                    ref="formRef" :auto-label-width="true"
                    :label-col-props="{ span: 24 }"
                    :wrapper-col-props="{ span: 18 }"
                    label-align="left"
                >
                    <a-row :gutter="16">
                        <a-col :span="8">
                            <a-form-item
                                field="settleType"
                                :label="'结算状态'"
                            >
                                <a-select
                                    v-model="queryForm.settleType"
                                    :options="settleStatus"
                                    placeholder="请选择结算状态"
                                    allow-clear
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item
                                field="yearMonthTime"
                                :label="'支付月份'"
                            >
                                <a-month-picker v-model="queryForm.yearMonthTime" style="width: 200px;" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-col>
            <a-divider style="height: 100px" direction="vertical"/>
            <a-col :flex="'86px'" style="text-align: right">
                <a-space direction="vertical" :size="18">
                    <a-button type="primary" @click="queryData">
                        <template #icon>
                            <icon-search/>
                        </template>
                        查询
                    </a-button>
                    <a-button @click="reset">
                        <template #icon>
                            <icon-refresh/>
                        </template>
                        重置
                    </a-button>
                </a-space>
            </a-col>
        </a-row>
<!--        <a-divider/>-->
        <a-card :style="{ width: '100%' }">
            <a-card-grid
                :style="{ width: '30%',height:'50px' ,marginBottom: '20px'}"
            >
                <a-card :bordered="true" hoverable
                        :style="{ width: '100%',height:'50px', marginBottom: '20px' }">
                    <div
                        :style="{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                      }"
                    >
                      <span
                          :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
                      >
                        <a-typography-text>总订单金额:</a-typography-text>
                      </span>
                        <span style="color: #ee0a24">{{stData.orderAmount-stData.refundIntegral}}米</span>
                    </div>
                </a-card>
            </a-card-grid>
            <a-card-grid
                :style="{ width: '30%',height:'50px' ,marginBottom: '20px'}"
            >
                <a-card :bordered="true" hoverable
                        :style="{ width: '100%',height:'50px', marginBottom: '20px' }">
                    <div
                        :style="{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                      }"
                    >
                      <span
                          :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
                      >
                        <a-typography-text>商家结算金额:</a-typography-text>
                      </span>
                        <span style="color: #ee0a24">￥{{stData.enterpriseSettleAmount}}</span>
                    </div>
                </a-card>
            </a-card-grid>
        </a-card>
        <GiTable
            row-key="yearMonthTime"
            :data="dataList"
            :columns="columns"
            :loading="loading"
            :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
            :pagination="pagination"
            :disabled-tools="['size']"
            @refresh="refresh"
        >


            <template #toolbar-left>
                <a-button @click="onExport">
                    <template #icon>
                        <icon-download/>
                    </template>
                    <template #default>导出</template>
                </a-button>
            </template>
            <template #expireStartTime="{ record }">
                <span>{{ record.expireStartTime }} ~ {{ record.expireEndTime }}</span>
            </template>
            <template #whetherReceive="{ record }">
                <span v-if="record.whetherReceive === true">
                    <span>已领取</span>
                  </span>
                <span v-if="record.whetherReceive === false">
                    <span>未领取</span>
                  </span>
            </template>
            <template #enterpriseSettleRatio="{ record }">
                <span v-if="record.enterpriseSettleRatio">
                    {{ record.enterpriseSettleRatio }}%
                </span>
            </template>
            <template #payChannel="{ record }">
                <span v-if="record.payChannel === 'wechat'">
                    <span>微信</span>
                  </span>
                <span v-if="record.payChannel === 'alipay'">
                    <span>支付宝</span>
                  </span>
                <span v-if="record.payChannel === 'pay_integral'">
                    <span>积分支付</span>
                  </span>
            </template>
            <template #settleType="{ record }">
                <span v-if="record.settleType === '0'">
                    <span>未结算</span>
                  </span>
                <span v-if="record.settleType === '1'">
                    <span>已结算</span>
                  </span>
            </template>
            <template #currentStatus="{ record }">
                <span v-if="record.currentStatus === 'unPay'">
                    <span>未支付</span>
                  </span>
                <span v-if="record.currentStatus === 'paid'">
                    <span>已付款</span>
                  </span>
                <span v-if="record.currentStatus === 'finished'">
                    <span>订单完成</span>
                  </span>
                <span v-if="record.currentStatus === 'refund'">
                    <span>退款申请</span>
                  </span>
                <span v-if="record.currentStatus === 'refund_success'">
                    <span>退款成功</span>
                  </span>
                <span v-if="record.currentStatus === 'refund_fail'">
                    <span>退款失败</span>
                  </span>
            </template>
            <template #orderAmount="{ record }">
                <a-statistic :value="record.orderAmount-record.refundIntegral" :precision="2" :value-style="{ color: '#F53F3F',fontSize:'14px' }">
                    <template #prefix>
                        ￥
                    </template>
                </a-statistic>
            </template>
            <template #integralNumber="{ record }">
                <a-statistic :value="record.integralNumber" :precision="2" :value-style="{ color: '#F53F3F',fontSize:'14px' }">
                    <template #suffix>
                        米
                    </template>
                </a-statistic>
            </template>
            <template #deductionAmount="{ record }">
                <a-statistic :value="record.deductionAmount" :precision="2" :value-style="{ color: '#F53F3F',fontSize:'14px' }">
                    <template #prefix>
                        ￥
                    </template>
                </a-statistic>
            </template>
            <template #realAmount="{ record }">
                <a-statistic :value="record.realAmount" :precision="2" :value-style="{ color: '#F53F3F',fontSize:'14px' }">
                    <template #prefix>
                        ￥
                    </template>
                </a-statistic>
            </template>
            <template #enterpriseSettleAmount="{ record }">
                <a-statistic :value="record.enterpriseSettleAmount" :precision="2" :value-style="{ color: '#F53F3F',fontSize:'14px' }">
                    <template #prefix>
                        ￥
                    </template>
                </a-statistic>
            </template>
            <template #action="{ record }">
                <a-space>
                    <a-link v-permission="['system:channelPoint:modify']" @click="onUpdate(record)">修改</a-link>
                    <a-link
                        v-permission="['system:channelPoint:delete']"
                        status="danger"
                        :disabled="record.disabled"
                        @click="onDelete(record)"
                    >
                        删除
                    </a-link>
                </a-space>
            </template>
        </GiTable>
    </div>
</template>

<script setup lang="ts">
import type * as T from '@/apis/mall/type'
import {
    deleteObject,
    enterprisePage,
    updateEnterpriseSettle,
    exportEnterpriseSettle,
    getEnterpriseSt
} from '@/apis/mall/order'
import type {TableInstanceColumns} from '@/components/GiTable/type'
import {useTable} from '@/hooks'
import {isMobile} from '@/utils'
import {Modal} from '@arco-design/web-vue';
import {ref} from "vue";
import type {LabelValueState} from "@/types/global";
import {Message} from "@arco-design/web-vue";
import {useDownload, useForm} from '@/hooks'
const router = useRouter()
defineOptions({name: 'ChannelPoint'})
const queryForm = reactive<T.OrderQuery>({})
const unitList = ref<LabelValueState[]>([])
const {
    tableData: dataList,
    loading,
    pagination,
    refresh,
    handleDelete
} = useTable((pageNum) => enterprisePage({...queryForm, ...pageNum}), {immediate: true})
const stData = ref<T.OrderDto>({})
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true
});
// 下载渠道结算记录
const onExport = () => {
    Modal.warning({
        title: '导出商家结算',
        content: `是否导出商家结算数据？`,
        cancelText: '取消',
        okButtonProps: {status: 'danger'},
        hideCancel: false,
        draggable: true,
        maskClosable: false,
        onOk: async () => {
            const res =  await useDownload(() => exportEnterpriseSettle(queryForm))
        },
    });
}

const handleSelectRow = (rowKeys) => {
}
const settleStatus = [{label: '未结算', value: 0}, {label: '已结算', value: 1}]
const keys = ref<any[]>([])
//獲取全選行id
const handleSelectAllRow = (rowKeys: any[]) => {
    keys.value = rowKeys
}
const settleHandle = () => {
    const ids = reactive<any[]>([])
    keys.value.map((item) => {
        dataList.value.map((data) => {
            if (data.yearMonthTime === item && data.disabled === false) {
                ids.push(data.yearMonthTime)
            }
        })
    })
    if (ids.length === 0) {
        Message.error('请选择未结算的月份')
        return;
    }
    updateEnterpriseSettle({yearMonthTimes: ids}).then(() => {
        refresh()
    })
}
const columns: TableInstanceColumns[] = [
    {
        title: '月份',
        width: 100,
        align: 'center',
        dataIndex: 'yearMonthTime',
        fixed: !isMobile() ? 'left' : undefined
    },
    {title: '订单金额', dataIndex: 'orderAmount', slotName: 'orderAmount', align: 'center', show: true, width: 120},
    {title: '商家结算比例',slotName: 'enterpriseSettleRatio', show: true, align: 'center', width: 120},
    {title: '商家结算金额', dataIndex: 'enterpriseSettleAmount',slotName:'enterpriseSettleAmount', align: 'center', width: 120},
    {title: '结算标志', slotName: 'settleType', align: 'center', width: 100},
    {title: '结算日期', dataIndex: 'enterpriseSettleYMR', align: 'center', width: 180},
]


// 重置
const reset = () => {
    refresh()
}

// 删除
const onDelete = (record: T.OrderDto) => {
    return handleDelete(() => deleteObject(record.orderId), {
        content: `是否确定删除 [${record.orderId}]？`,
        showModal: true
    })
}

// 新增
const onAdd = () => {
    router.push({path: '/qd/channelPoint/addOrUpdate'})
}

// 修改
const onUpdate = (record: T.OrderDto) => {
    router.push({path: '/qd/channelPoint/addOrUpdate', query: {id: record.orderId, type: 'edit'}})
}

// 详情
const onDetail = (record: T.OrderDto) => {
}
onMounted(async () => {
    const st = await getEnterpriseSt(queryForm)
    stData.value = st.data
})

const queryData = async () => {
    refresh();
    const st = await getEnterpriseSt(queryForm)
    stData.value = st.data
}


</script>

<style lang="scss" scoped>
.page_header {
    flex: 0 0 auto;
}

.page_content {
    flex: 1;
    overflow: auto;
}
</style>
